

<template>
  <div class="dashboard-container">

    <div class="dashboard-circle"></div>

    <div class="dashboard-scale"></div>

    <div class="pointer" id="pointer"></div>

    <div class="score-display" id="score">75</div>

    <div class="label label-差">差</div>

    <div class="label label-较差">较差</div>

    <div class="label label-中等">中等</div>

    <div class="label label-良好">良好</div>

    <div class="label label-优秀">优秀</div>

  </div>
</template>
<script setup lang="ts">
// 根据分数计算指针旋转角度

function updatePointerByScore(score) {

// 这里假设总分为 100，对应 0~300°（也可以根据需要调整区间）

// 示例逻辑：0~25 → 0~60°；25~50 → 60~120°；50~75 → 120~240°；75~90 → 240~300°；90~100 → 300~360°

// 也可以做更线性的映射，比如 (score / 100) * 300

  let angle;

  if (score <= 25) {

    angle = (score / 25) * 60;

  } else if (score <= 50) {

    angle = 60 + ((score - 25) / 25) * 60;

  } else if (score <= 75) {

    angle = 120 + ((score - 50) / 25) * 120;

  } else if (score <= 90) {

    angle = 240 + ((score - 75) / 15) * 60;

  } else {

    angle = 300 + ((score - 90) / 10) * 60;

  }

// 给指针元素设置 transform 的 rotate 角度

  document.getElementById("pointer").style.transform =

      "translateX(-50%) rotate(" + angle + "deg)";

// 同时更新分数显示（如果分数来自接口或其他地方，可以在这里同步）

  document.getElementById("score").textContent = score;

}
// 页面加载完成后，初始化指针位置
window.onload = function () {
  updatePointerByScore(75); // 初始设为 75 分，可修改为你需要的分数
};
</script>
<style scoped lang="less">
/* 整体容器，用于居中 */

.dashboard-container {

  width: 400px;

  height: 250px;

  margin: 50px auto;

  position: relative;

}
/* 仪表盘外圈（半圆） */
.dashboard-circle {
  width: 300px;
  height: 150px;
  border-radius: 150px 150px 0 0;
  background: conic-gradient(
    /* 从左到右，对应“差→较差→中等→良好→优秀”的颜色 */
      red 0deg 60deg,        /* 差 */
      orange 60deg 120deg,   /* 较差 */
      gold 120deg 240deg,    /* 中等 */
      lightgreen 240deg 300deg, /* 良好 */
      green 300deg 360deg    /* 优秀 */
  );
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

/* 仪表盘刻度线（示例：每隔 30° 画一条短线，可根据需要调整） */
.dashboard-scale {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  height: 150px;
  border-radius: 150px 150px 0 0;
}
.dashboard-scale::before,
.dashboard-scale::after {
  content: "";
  position: absolute;
  width: 1px;
  height: 8px;
  background: #333;
  left: 50%;
  transform-origin: bottom center;
}
/* 简单示意几条主要刻度，实际项目中可循环生成或更精细控制 */
.dashboard-scale::before {
  transform: translateX(-50%) rotate(60deg);
}
.dashboard-scale::after {
  transform: translateX(-50%) rotate(120deg);
}

/* 指针样式 */
.pointer {
  position: absolute;
  bottom: 15px;  /* 从仪表盘底部往上一点的位置开始 */
  left: 50%;
  transform-origin: bottom center;
  transform: translateX(-50%) rotate(0deg); /* 初始角度，JS 中动态修改 */
  width: 4px;
  height: 60px;
  background: #333;
  border-radius: 2px;
}

/* 分数显示区域 */
.score-display {
  position: absolute;
  bottom: 90px;  /* 指针上方，根据需要调整 */
  left: 50%;
  transform: translateX(-50%);
  font-size: 48px;
  font-weight: bold;
  color: #333;
}

/* 文字标签（差、较差、中等、良好、优秀） */
.label {
  position: absolute;
  font-size: 14px;
  color: #333;
}
.label-差 {
  left: 10%;
  top: 100%;
}
.label-较差 {
  left: 35%;
  top: 100%;
}
.label-中等 {
  left: 60%;
  top: 100%;
}
.label-良好 {
  left: 80%;
  top: 100%;
}
.label-优秀 {
  right: 5%;
  top: 100%;
}
</style>